<template>
  <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view
      style="display: flex; align-items: center; width: 100%; box-sizing: border-box; position: fixed; top: 0; left: 0; padding-left: 30rpx; z-index: 99; background-color: #fff"
      :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }"
    >
      <uni-icons type="left" size="20" @click="goback"></uni-icons>
      <view style="display: flex; align-items: center">
        <view style="font-weight: bold; font-size: 36rpx; color: #151515; padding-left: 254rpx">群管理</view>
      </view>
    </view>
    <!-- 站位盒子 -->
    <view :style="{ height: navheight + 'px', width: '100%' }"></view>
    <view class="body">
      <!-- 群成员 -->
      <view class="chengyuan" style="padding-top: 30rpx; background-color: #fff">
        <!-- 头像昵称 -->

        <view
          class="picture"
          style="width: 108rpx; text-align: center; margin-left: 35rpx; margin-bottom: 40rpx; display: inline-block"
          v-for="(item, index) in avatarlist"
          :key="item.id"
        >
          <view style="position: relative; top: 0; left: 0">
            <image :src="$getimgsrc(item.user.avatar)" style="width: 108rpx; height: 108rpx; display: block; border-radius: 50%"></image>
            <view
              style="
                position: absolute;
                bottom: 0;
                left: 0;
                width: 108rpx;
                height: 30rpx;
                border-radius: 20rpx;
                background-color: aquamarine;
                color: #fff;
                font-size: 26rpx;
                text-align: center;
                line-height: 30rpx;
              "
              v-if="item.style == 1 || item.style == 2"
            >
              {{ item.style == 1 ? '群管理' : '群主' }}
            </view>
          </view>
          <text style="display: block; width: 100%; font-size: 24rpx; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
            {{ item.user.nickname }}
          </text>
        </view>

        <!-- 添加 -->
        <view
          v-if="guanli_show != 0"
          class="picture"
          style="width: 108rpx; text-align: center; margin-left: 35rpx; margin-bottom: 40rpx; display: inline-block"
          @click="$refs.addPopup.open()"
        >
          <image src="../../static/messageimg/d4.png" style="width: 108rpx; height: 108rpx; display: block"></image>
          <text style="font-size: 24rpx; color: #666666">添加</text>
        </view>
        <!-- 删除 -->
        <view
          v-if="guanli_show != 0"
          class="picture"
          style="width: 108rpx; text-align: center; margin-left: 35rpx; margin-bottom: 40rpx; display: inline-block"
          @click="$refs.removePopup.open()"
        >
          <image src="../../static/messageimg/d3.png" style="width: 108rpx; height: 108rpx; display: block"></image>
          <text style="font-size: 24rpx; color: #666666">删除</text>
        </view>
        <!-- 普通成员 -->
        <view style="width: 100%; height: 100rpx; text-align: center; color: #666666; margin-bottom: 40rpx" @click="member">
          <text>查看更多群成员</text>
          <image src="../../static/myimg/a15.png" style="width: 14rpx; height: 20rpx; margin-left: 20rpx"></image>
        </view>
      </view>
      <!-- 功能 -->
      <view class="gongneng" style="margin-top: 30rpx; background-color: #fff">
        <view style="width: 100%; display: flex; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8" @click="groupname">
          <view style="height: 132rpx; line-height: 132rpx; position: relative">
            <text style="font-size: 32rpx; margin-left: 30rpx">群名称</text>
          </view>
          <view style="height: 132rpx; line-height: 132rpx; margin-right: 20rpx">
            <text
              style="
                display: inline-block;
                width: 386rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #666666;
                font-size: 32rpx;
                vertical-align: middle;
                text-align: right;
              "
            >
              {{ Groupdetail.group_name || '' }}
            </text>
            <image src="../../static/myimg/a6.png" style="width: 30rpx; height: 30rpx; vertical-align: middle"></image>
          </view>
        </view>
        <view style="border-bottom: 1rpx solid #e8e8e8" @click="gogroupnotic">
          <view style="width: 100%; display: flex; justify-content: space-between">
            <view style="height: 132rpx; line-height: 132rpx; position: relative">
              <text style="font-size: 32rpx; margin-left: 30rpx">群公告</text>
            </view>
            <view style="height: 132rpx; line-height: 132rpx; margin-right: 20rpx">
              <text style="color: #666666; font-size: 32rpx">{{ Groupdetail.bulletin == '' ? '未设置' : '' }}</text>
              <image src="../../static/myimg/a6.png" style="width: 30rpx; height: 30rpx; vertical-align: middle"></image>
            </view>
          </view>
          <view style="padding: 0 30rpx 30rpx 30rpx" v-if="Groupdetail.bulletin">
            <text>
              {{ Groupdetail.bulletin || '' }}
            </text>
          </view>
        </view>
        <view v-if="guanli_show == 2" style="width: 100%; display: flex; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8" @click="grouppeople">
          <view style="height: 132rpx; line-height: 132rpx; position: relative">
            <text style="font-size: 32rpx; margin-left: 30rpx">添加群管理</text>
          </view>
          <view style="height: 132rpx; line-height: 132rpx; margin-right: 20rpx">
            <image src="../../static/myimg/a6.png" style="width: 30rpx; height: 30rpx; vertical-align: middle"></image>
          </view>
        </view>
        <!-- <view
					style="width: 100%; display: flex; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8">
					<view style="height: 132rpx; line-height: 132rpx; position: relative">
						<text style="font-size: 32rpx; margin-left: 30rpx">查看聊天记录</text>
					</view>
					<view style="height: 132rpx; line-height: 132rpx; margin-right: 20rpx">
						<image src="../../static/myimg/a6.png"
							style="width: 30rpx; height: 30rpx; vertical-align: middle"></image>
					</view>
				</view> -->
        <view v-if="guanli_show != 0" style="width: 100%; display: flex; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8" @click="openjinyan">
          <view style="height: 132rpx; line-height: 132rpx; position: relative">
            <text style="font-size: 32rpx; margin-left: 30rpx">禁言成员</text>
          </view>
          <view style="height: 132rpx; line-height: 132rpx; margin-right: 20rpx">
            <image src="../../static/myimg/a6.png" style="width: 30rpx; height: 30rpx; vertical-align: middle"></image>
          </view>
        </view>
        <view v-if="guanli_show != 0" style="width: 100%; display: flex; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8" @click="openyichujinyan">
          <view style="height: 132rpx; line-height: 132rpx; position: relative">
            <text style="font-size: 32rpx; margin-left: 30rpx">移除禁言成员</text>
          </view>
          <view style="height: 132rpx; line-height: 132rpx; margin-right: 20rpx">
            <image src="../../static/myimg/a6.png" style="width: 30rpx; height: 30rpx; vertical-align: middle"></image>
          </view>
        </view>
      </view>
      <!-- 举报 -->
      <view class="jubao" style="background-color: #fff; margin: 20rpx 0" @click="jubao">
        <view style="width: 100%; display: flex; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8">
          <view style="height: 132rpx; line-height: 132rpx; position: relative">
            <text style="font-size: 32rpx; margin-left: 30rpx">举报群组</text>
          </view>
          <view style="height: 132rpx; line-height: 132rpx; margin-right: 20rpx">
            <image src="../../static/myimg/a6.png" style="width: 30rpx; height: 30rpx; vertical-align: middle"></image>
          </view>
        </view>
      </view>
      <!-- 退出群聊 -->
      <view class="tuchu" @click="secede">
        <view style="width: 100%">
          <button style="height: 112rpx; line-height: 112rpx; font-size: 32rpx; color: #666666; background-color: #fff; border: 0">退出群聊</button>
        </view>
      </view>
    </view>

    <!-- 添加弹层 -->
    <uni-popup ref="addPopup" type="bottom" border-radius="20px 20px 0 0" @change="change">
      <view style="width: 92%; background-color: #fff; border-radius: 30rpx 30rpx 0 0; padding: 36rpx 30rpx" :style="{ height: screenHeight * 0.8 + 'px' }">
        <!-- 顶部 -->
        <view class="top" style="width: 100%; display: flex; justify-content: space-between">
          <text @click="$refs.addPopup.close()">取消</text>
          <text style="font-size: 32rpx; font-weight: 700">添加群成员</text>
          <text style="color: #37c1ff" @click="settianjia">完成</text>
        </view>
        <view style="border-bottom: 1rpx solid #e8e8e8; margin: 28rpx 0 16rpx 0"></view>
        <!-- 搜索 -->
        <view class="center" style="position: relative; background-color: #f1edf0; width: 100%; height: 68rpx; border-radius: 34rpx; display: flex">
          <image src="../../static/messageimg/d5.png" style="width: 28rpx; height: 28rpx; position: absolute; left: 2%; top: 30%"></image>
          <input
            type="text"
            v-model="search_name"
            @blur="adduser"
            placeholder="搜索"
            placeholder-style="font-size: 24rpx"
            style="width: 86%; height: 68rpx; vertical-align: middle; margin-left: 50rpx; overflow: hidden"
          />
        </view>
        <!-- 成员 -->
        <scroll-view :style="{ height: screenHeight * 0.7 + 'px' }" scroll-y :show-scrollbar="false">
          <view class="bottom" style="margin-top: 40rpx; height: 100%">
            <view style="display: flex; justify-content: space-between; margin-bottom: 30rpx" v-for="(item, index) in adduserlist" :key="item">
              <view>
                <image :src="$getimgsrc(item.avatar)" style="width: 84rpx; height: 84rpx; vertical-align: middle; border-radius: 50%" />
                <text style="margin-left: 24rpx">{{ item.nickname }}</text>
              </view>
              <view style="display: flex; flex-direction: column; justify-content: center">
                <radio :checked="addlist.indexOf(item) != -1" @click="tianjiauser(item, index)" style="transform: scale(0.7)" color="#FEFF01" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 移出弹层 -->
    <uni-popup ref="removePopup" type="bottom" border-radius="20px 20px 0 0" @change="change">
      <view style="width: 92%; background-color: #fff; border-radius: 30rpx 30rpx 0 0; padding: 36rpx 30rpx" :style="{ height: screenHeight * 0.8 + 'px' }">
        <!-- 顶部 -->
        <view class="top" style="width: 100%; display: flex; justify-content: space-between">
          <text @click="$refs.removePopup.close()">取消</text>
          <text style="font-size: 32rpx; font-weight: 700">移出成员</text>
          <text style="color: #37c1ff" @click="setyichu">完成</text>
        </view>
        <view style="border-bottom: 1rpx solid #e8e8e8; margin: 28rpx 0 16rpx 0"></view>
        <!-- 搜索 -->
        <view class="center" style="position: relative; background-color: #f1edf0; width: 100%; height: 68rpx; border-radius: 34rpx; display: flex">
          <image src="../../static/messageimg/d5.png" style="width: 28rpx; height: 28rpx; position: absolute; left: 2%; top: 30%"></image>
          <input
            type="text"
            placeholder="搜索"
            v-model="search_name"
            @blur="remshoushuo"
            placeholder-style="font-size: 24rpx"
            style="width: 86%; height: 68rpx; vertical-align: middle; margin-left: 50rpx; overflow: hidden"
          />
        </view>
        <!-- 成员 -->
        <scroll-view :style="{ height: screenHeight * 0.7 + 'px' }" scroll-y :show-scrollbar="false">
          <view class="bottom" style="margin-top: 40rpx; height: 100%">
            <view style="display: flex; justify-content: space-between; margin-bottom: 30rpx" v-for="(item, index) in list2" :key="item">
              <view>
                <image :src="$getimgsrc(item.user.avatar)" style="width: 84rpx; height: 84rpx; vertical-align: middle" />
                <text style="margin-left: 24rpx">{{ item.user.nickname }}</text>
              </view>
              <view style="display: flex; flex-direction: column; justify-content: center">
                <radio @click="remuser(item, index)" :checked="remList.indexOf(item) != -1" style="transform: scale(0.7)" color="#FEFF01" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 禁言群成员 -->
    <uni-popup ref="disabledPopup" type="bottom" border-radius="20px 20px 0 0" @change="change">
      <view style="width: 92%; background-color: #fff; border-radius: 30rpx 30rpx 0 0; padding: 36rpx 30rpx" :style="{ height: screenHeight * 0.8 + 'px' }">
        <!-- 顶部 -->
        <view class="top" style="width: 100%; display: flex; justify-content: space-between">
          <text @click="$refs.disabledPopup.close()">取消</text>
          <text style="font-size: 32rpx; font-weight: 700">禁言群成员</text>
          <text style="color: #37c1ff" @click="setjinyan">完成</text>
        </view>
        <view style="border-bottom: 1rpx solid #e8e8e8; margin: 28rpx 0 16rpx 0"></view>
        <!-- 搜索 -->
        <view class="center" style="position: relative; background-color: #f1edf0; width: 100%; height: 68rpx; border-radius: 34rpx; display: flex">
          <image src="../../static/messageimg/d5.png" style="width: 28rpx; height: 28rpx; position: absolute; left: 2%; top: 30%"></image>
          <input
            type="text"
            v-model="search_name"
            @blur="jinyanshoushuo"
            placeholder="搜索"
            placeholder-style="font-size: 24rpx"
            style="width: 86%; height: 68rpx; vertical-align: middle; margin-left: 50rpx; overflow: hidden"
          />
        </view>
        <!-- 成员 -->
        <scroll-view :style="{ height: screenHeight * 0.7 + 'px' }" scroll-y :show-scrollbar="false">
          <view class="bottom" style="margin-top: 40rpx; height: 100%">
            <view style="display: flex; justify-content: space-between; margin-bottom: 30rpx" v-for="(item, index) in list3" :key="item">
              <view>
                <image :src="$getimgsrc(item.user.avatar)" style="width: 84rpx; height: 84rpx; vertical-align: middle; border-radius: 50%" />
                <text style="margin-left: 24rpx">{{ item.user.nickname }}</text>
              </view>
              <view style="display: flex; flex-direction: column; justify-content: center">
                <radio @click="jinyanuser(item, index)" :checked="jinyanlist.indexOf(item) != -1" style="transform: scale(0.7)" color="#FEFF01" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 移除禁言成员 -->
    <uni-popup ref="removejinyan" type="bottom" border-radius="20px 20px 0 0" @change="change">
      <view style="width: 92%; background-color: #fff; border-radius: 30rpx 30rpx 0 0; padding: 36rpx 30rpx" :style="{ height: screenHeight * 0.8 + 'px' }">
        <!-- 顶部 -->
        <view class="top" style="width: 100%; display: flex; justify-content: space-between">
          <text @click="$refs.removejinyan.close()">取消</text>
          <text style="font-size: 32rpx; font-weight: 700">移除禁言成员</text>
          <text style="color: #37c1ff" @click="exitjinyan">完成</text>
        </view>
        <view style="border-bottom: 1rpx solid #e8e8e8; margin: 28rpx 0 16rpx 0"></view>
        <!-- 搜索 -->
        <view class="center" style="position: relative; background-color: #f1edf0; width: 100%; height: 68rpx; border-radius: 34rpx; display: flex">
          <image src="../../static/messageimg/d5.png" style="width: 28rpx; height: 28rpx; position: absolute; left: 2%; top: 30%"></image>
          <input
            type="text"
            v-model="search_name"
            @blur="removejinyansousuo"
            placeholder="搜索"
            placeholder-style="font-size: 24rpx"
            style="width: 86%; height: 68rpx; vertical-align: middle; margin-left: 50rpx; overflow: hidden"
          />
        </view>
        <!-- 成员 -->
        <scroll-view :style="{ height: screenHeight * 0.7 + 'px' }" scroll-y :show-scrollbar="false">
          <view class="bottom" style="margin-top: 40rpx; height: 100%">
            <view style="display: flex; justify-content: space-between; margin-bottom: 30rpx" v-for="(item, index) in list4" :key="item">
              <view>
                <image :src="$getimgsrc(item.user.avatar)" style="width: 84rpx; height: 84rpx; vertical-align: middle; border-radius: 50%" />
                <text style="margin-left: 24rpx">{{ item.user.nickname }}</text>
              </view>
              <view style="display: flex; flex-direction: column; justify-content: center">
                <radio @click="removejinyanuser(item, index)" :checked="removejinyanlist.indexOf(item) != -1" style="transform: scale(0.7)" color="#FEFF01" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      guanli_show: true, //  身份:0=用户,1=管理员,2=群主
      show: false, // 禁止scroll-view穿透滚动
      hometop: '',
      navheight: '',
      img_url: this.img_url,
      morecaozuo: true,
      iskeybord: false,
      list: [],
      list2: [],
      list3: [],
      list4: [],
      list_popup: [],
      screenHeight: '',
      id: '',
      Groupdetail: {},
      remList: [],
      search_name: '',
      adduserlist: [],
      addlist: [],
      jinyanlist: [],
      removejinyanlist: [],
      guanliIds: [], // 拥有管理员 权限和群主权限的id
      qunzhuid: '',
      avatarlist: [] // 头像列表
    };
  },
  onLoad(op) {
    this.id = op.id;
    uni.getSystemInfo({
      success: (res) => {
        const screenWidth = res.screenWidth;
        const screenHeight = res.screenHeight;
        console.log(res.screenWidth, res.screenHeight);
        // 根据这些尺寸进行布局计算
        this.screenHeight = res.screenHeight;
      }
    });
    const app = getApp();
    this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
    this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
  },
  onShow() {
    this.getstyle();
    this.getGroupUserList();
    this.getGroupUserList2();
    this.getGroupRes();
    this.getAdduserList();
  },
  methods: {
    openyichujinyan() {
      this.list4 = this.list2;
      this.$refs.removejinyan.open();
    },
    openjinyan() {
      this.list3 = this.list2;
      this.$refs.disabledPopup.open();
    },
    // 移除禁言成员
    exitjinyan() {
      if (this.removejinyanlist.length == 0) return this.util.showToast('请选择要添加的成员');
      let arr = [];
      arr = this.removejinyanlist.map((item) => {
        return item.user.id;
      });

      this.http('/group/openSayAuth', {
        group_id: this.id,
        user_ids: arr.join()
      }).then((res) => {
        this.util.showToast(res.msg);
        this.removejinyanlist = [];
        this.$refs.removejinyan.close();
        this.getGroupUserList2();
        this.getGroupUserList();
        this.getAdduserList();
      });
    },
    removejinyanuser(item, index) {
      if (this.removejinyanlist.indexOf(item) != -1) {
        this.removejinyanlist.splice(this.removejinyanlist.indexOf(item), 1);
      } else {
        this.removejinyanlist.push(item);
      }
    },
    // 移除禁言搜索
    removejinyansousuo() {
      this.removejinyanlist = [];
      this.getGroupUserList2();
    },
    tuichu() {
      this.http('/group/exitGroup', {
        group_id: this.id
      }).then((res) => {
        uni.navigateBack({
          delta: 2
        });
      });
    },
    remshoushuo() {
      this.remList = [];
      this.getGroupUserList2();
    },
    adduser() {
      this.addlist = [];
      this.getAdduserList();
    },
    jinyanshoushuo() {
      this.jinyanlist = [];
      this.getGroupUserList2();
    },
    setjinyan() {
      if (this.jinyanlist.length == 0) return this.util.showToast('请选择要添加的成员');
      let arr = [];
      arr = this.jinyanlist.map((item) => {
        return item.user.id;
      });

      let swich = false;
      this.guanliIds.forEach((item) => {
        if (swich) return;
        arr.forEach((item2) => {
          if (item == item2) {
            if (this.guanli_show == 1) {
              swich = true;
              return uni.showToast({
                title: '您暂无权限禁言管理员/群主',
                icon: 'none'
              });
            }
          }
        });
      });
      console.log('管理员', arr);
      if (swich) return;
      let qunzhu = false;
      arr.forEach((item) => {
        if (item == this.qunzhuid) {
          qunzhu = true;
          return uni.showToast({
            title: '群主不可被禁言',
            icon: 'none'
          });
        }
      });
      if (qunzhu) return;
      this.http('/group/stopSayAuth', {
        group_id: this.id,
        user_ids: arr.join()
      }).then((res) => {
        this.util.showToast(res.msg);
        this.jinyanlist = [];
        this.$refs.disabledPopup.close();
        this.getGroupUserList2();
        this.getGroupUserList();
        this.getAdduserList();
      });
    },
    settianjia() {
      if (this.addlist.length == 0) return this.util.showToast('请选择要添加的成员');
      let arr = [];
      arr = this.addlist.map((item) => {
        return item.id;
      });
      this.http('/group/inviteUsersJoinGroup', {
        group_id: this.id,
        user_ids: arr.join()
      }).then((res) => {
        this.util.showToast(res.msg);
        this.addlist = [];
        this.$refs.addPopup.close();
        this.getAdduserList();
        this.getGroupUserList();
        this.getGroupUserList2();
      });
    },
    setyichu() {
      if (this.remList.length == 0) return this.util.showToast('请选择要移除的成员');
      let arr = [];
      arr = this.remList.map((item) => {
        return item.user.id;
      });
      let swich = false;
      this.guanliIds.forEach((item) => {
        if (swich) return;
        arr.forEach((item2) => {
          if (item == item2) {
            if (this.guanli_show == 1) {
              swich = true;
              return uni.showToast({
                title: '您暂无权限删除管理员/群主',
                icon: 'none'
              });
            }
          }
        });
      });
      console.log('管理员', arr);
      if (swich) return;
      let qunzhu = false;
      arr.forEach((item) => {
        if (item == this.qunzhuid) {
          qunzhu = true;
          return uni.showToast({
            title: '群主不可被移除',
            icon: 'none'
          });
        }
      });
      console.log('群主', arr);
      if (qunzhu) return;
      this.http('/group/exitGroupUsers', {
        group_id: this.id,
        user_ids: arr.join()
      }).then((res) => {
        this.util.showToast(res.msg);
        this.remList = [];
        this.$refs.removePopup.close();
        this.getGroupUserList();
        this.getGroupUserList2();
        this.getAdduserList();
      });
    },
    jinyanuser(item, index) {
      if (this.jinyanlist.indexOf(item) != -1) {
        this.jinyanlist.splice(this.jinyanlist.indexOf(item), 1);
      } else {
        this.jinyanlist.push(item);
      }
    },
    tianjiauser(item, index) {
      if (this.addlist.indexOf(item) != -1) {
        this.addlist.splice(this.addlist.indexOf(item), 1);
      } else {
        this.addlist.push(item);
      }
    },
    //选择移除
    remuser(item, index) {
      if (this.remList.indexOf(item) != -1) {
        this.remList.splice(this.remList.indexOf(item), 1);
      } else {
        this.remList.push(item);
      }
    },
    //获取当前用户在群中的身份
    getstyle() {
      this.http('/group/stylebody', {
        chat_group_id: this.id
      }).then((res) => {
        console.log('身份信息', res);
        this.guanli_show = res.data;
      });
    },
    //获取添加群成员列表
    getAdduserList() {
      this.http('/group/getAddGroupUserList', {
        group_id: this.id,
        search_name: this.search_name
      }).then((res) => {
        console.log('添加群成员', res);
        this.adduserlist = res.data;
      });
    },
    // 获取群详情信息
    getGroupRes() {
      this.http('/group/getGroupRes', {
        group_id: this.id
      }).then((res) => {
        this.Groupdetail = res.data;
      });
    },
    // 群成员列表
    getGroupUserList() {
      this.http('/group/getGroupUserList', {
        group_id: this.id
      }).then((res) => {
        this.list = res.data;
        if (res.data.length > 12) {
          this.avatarlist = res.data.splice(0, 13);
        } else {
          this.avatarlist = res.data;
        }
        this.list.forEach((item) => {
          if (item.style == 1 || item.style == 2) {
            this.guanliIds.push(item.user_id);
          }
        });
        this.list.forEach((item) => {
          if (item.style == 2) {
            this.qunzhuid = item.user_id;
          }
        });
        console.log('群主的id', this.qunzhuid);
        console.log('拥有管理权限的成员id', this.guanliIds);
      });
    },
    getGroupUserList2() {
      this.http('/group/getGroupUserList', {
        group_id: this.id,
        search_name: this.search_name
      }).then((res) => {
        this.list2 = res.data;
      });
    },
    // 未设置群公告跳转群公告
    gogroupnotic() {
      if (this.guanli_show == 0)
        return uni.showToast({
          title: '非群组或管理员',
          icon: 'none'
        });
      uni.navigateTo({
        url: '/message/groupnotice/groupnotice?id=' + this.id + '&qunjianjie=' + this.Groupdetail.bulletin
      });
    },
    goback() {
      uni.navigateBack();
    },
    change(e) {
      this.show = e.show;
    },
    // 修改你昵称
    groupname() {
      if (this.guanli_show == 0) {
        uni.showModal({
          title: '温馨提示',
          content: '当前群聊仅群主/群管理员可修改群聊名称',
          showCancel: false,
          confirmText: '我知道了',
          confirmColor: '#151515',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
        return;
      } else {
        // 跳转群名称
        uni.navigateTo({
          url: '/message/groupname/groupname?id=' + this.id + '&qunname=' + this.Groupdetail.group_name
        });
      }
    },
    // 添加群管理员
    addBtn() {
      this.$refs.addPopup.close();
    },
    // 移除群管理员
    removeBtn() {
      this.$refs.removePopup.close();
    },
    // 禁言
    disabledBtn() {
      this.$refs.disabledPopup.close();
    },
    grouppeople() {
      uni.navigateTo({
        url: '/message/grouppeople/grouppeople?id=' + this.id
      });
    },
    // 举报群组
    jubao() {
      uni.navigateTo({
        url: '/message/jubao/jubao?id=' + this.id
      });
    },
    // 退出群聊
    secede() {
      uni.showModal({
        title: '温馨提示',
        content: '确定退出群聊“这里是群聊名称这里是群聊名称”吗',
        cancelColor: '#CCCFDB',
        confirmColor: '#FF3742',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            this.tuichu();
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 查看所有群成员
    member() {
      uni.navigateTo({
        url: '/message/member/member?id=' + this.id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8f8f8;
  padding-bottom: 100rpx;
}
</style>
